<script setup lang="ts">
import { ref,Ref,reactive, toRefs } from 'vue'

// defineProps<{ msg: string }>()

/* const name = ref('陈思元')
// const name = ref<number|string>('陈思元')
//如果声明变量时要多个类型，可设置泛型
//https://www.cnblogs.com/hmy-666/p/16305093.html
const age= ref("0岁")
const person = ref("爸爸") */



const obj = reactive({
  name : '陈思元',
  age:'0岁',
  person:'爸爸'
})
const data= toRefs(obj)
//toRefs把对象里的每个值变成响应式，用...（拓展运算符）
const {name,age,person} = {...data}  //这种赋值方式是解构

const input = ref(null)

</script>

<template>
  <!-- <h1>{{ msg }}</h1> -->
  <el-input v-model="input" placeholder="Please input" />
  <ul>
    <li>姓名：{{name}}</li>
    <li>年龄：{{age}}</li>
    <li>最爱的人：{{person}}</li>
  </ul>
  <div>
    <button @click="name = '袁六六'">改变姓名</button>
    <button @click="age = '4个月'">改变年龄</button>
    <button @click="person = '妈妈'">改变最爱的人</button>
  </div>
  <div>{{obj}}</div>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
